<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../../../static/font-awesome-4.7.0/css/font-awesome.min.css" >
    <link rel="stylesheet" href="../../../static/vui/css/vui.css">

    <script type="text/javascript" src="../../../static/js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="../../../static/layer/layer.js"></script>
    <script type="text/javascript" src="../../../static/laydate/laydate.js"></script>
    <script type="text/javascript" src="../../../static/vui/js/vui.js"></script>
    <script type="text/javascript" src="../../../static/vui/js/reportgrid.js"></script>
    <script type="text/javascript" src="../../../static/js/common.js"></script>
</head>
<body>

<div id="formArea">
    <table class="table-top">
        <tr>
            <td>
                <label class="label">单据日期</label>
            </td>
            <td>
                <input type="text" n="date" class="input search-date" name="dateStart" autocomplete="off"/>&nbsp;-&nbsp;
                <input type="text" n="date" class="input search-date" name="dateEnd" autocomplete="off"/>
            </td>
            <td>
                <label class="label">仓库</label>
            </td>
            <td>
                <div id="stoneId"></div>
            </td>
            <td>
                <label class="label">商品</label>
            </td>
            <td>
                <div id="productId"></div>
            </td>
            <td>
                <button class="button" id="query"><span>查询</span></button>
                <button class="button" id="reset"><span>重置</span></button>
            </td>
        </tr>
    </table>

</div>

<div class="report-table-out">
    <div class="report-table-div">
        <table id="table" class="report-table">
            <tr class="report-head">
                <td rowspan="2">商品名称</td>
                <td rowspan="2">规格型号</td>
                <td rowspan="2">单位</td>
                <td rowspan="2">单据日期</td>
                <td rowspan="2">单据编号</td>
                <td rowspan="2">业务类别</td>
                <td rowspan="2">往来单位</td>
                <td rowspan="2">仓库</td>
                <td colspan="3">入库</td>
                <td colspan="3">出库</td>
                <td colspan="3">结存</td>
            </tr>
            <tr class="report-head">
                <td>入库数量</td>
                <td>入库成本</td>
                <td>成本单价</td>
                <td>出库数量</td>
                <td>出库成本</td>
                <td>成本单价</td>
                <td>结存数量</td>
                <td>结存成本</td>
                <td>成本单价</td>
            </tr>
        </table>
    </div>
</div>

<script>
    $(initStorePage);

    function initStorePage() {
        $('#query').click(function(){
            var productComplex = $('#productId input[name="productId_text"]').val();
            var data = app.serializeForm();
            data.productComplex = productComplex;
            $('#table').reportgrid("reload",data);
        });

        $('#reset').click(function(){
            $('#formArea input').val('');
            var company = {companyId:app.getCompanyId(),companyId_text:app.getCompanyName()};
            app.resetForm(company);
        });

        var nowDate = app.time2str(new Date()),startDate = new Date(nowDate.substr(0,8)+'01');
        dateStart = laydate.render({
            elem: 'input[name="dateStart"]',value:startDate,max:nowDate,
            done: function(value,date){
                if(value){
                    date.month=date.month-1;
                    dateEnd.config.min = date;
                }else{
                    dateEnd.config.min=dateStart.config.min;
                }
            }
        });
        dateEnd = laydate.render({
            elem: 'input[name="dateEnd"]',value:nowDate,min:nowDate.substr(0,8)+'01',
            done: function(value,date){
                if(value){
                    date.month=date.month-1;
                    dateStart.config.max = date;
                }else{
                    dateStart.config.max=dateEnd.config.max;
                }
            }
        });

        $('#reset').click(function () {
            $('#formArea input').val('');
            var company = {companyId:app.getCompanyId(),companyId_text:app.getCompanyName()};
            app.resetForm(company);

            var endDate = app.time2str(new Date());
            var startDate = endDate.substr(0,8)+'01';
            $('input[name="dateStart"]').val(startDate);

            dateEnd.config.min = {year:getYear(startDate),month:getMonth(startDate),date:getDate(startDate)};

            $('input[name="dateEnd"]').val(endDate);
            dateStart.config.max = {year:getYear(endDate),month:getMonth(endDate),date:getDate(endDate)};
        });

        function getYear(dateStr){
            return parseInt(dateStr.split('-')[0]);
        }

        function getMonth(dateStr){
            return parseInt(dateStr.split('-')[1])-1;
        }

        function getDate(dateStr){
            return parseInt(dateStr.split('-')[2]);
        }

        var columns = [
            {field:'productName',title:'商品名称',width:120},
            {field:'model',title:'规格型号',width:130},
            {field:'unitName',title:'单位',width:80},
            {field:'a',title:'单据日期',width:80,formatter:function (row) {
                var orderInfo = row['orderInfo'];
                if( orderInfo && $.trim(orderInfo).length > 0 ){
                    return app.time2str(orderInfo.split('|')[1]);
                }else{
                    return '';
                }
            }},
            {field:'b',title:'单据编号',width:130,formatter:function (row,val,col) {
                    return row['orderInfo'].split('|')[0];
                }},
            {field:'orderType',title:'业务类别',width:80,formatter:function (row,val) {
                    return app.orderTypes['a'+val];
                }},
            {field:'c',title:'往来单位',width:130,formatter:function (row,val,col) {
                    return row['orderInfo'].split('|')[2];
                }},
            {field:'storeName',title:'仓库',width:100},
            {field:'number1',title:'入库数量',width:80,n:'number',formatter:function (row,val,col) {
                    return row.type == 1 ? row.number : '';
                }},
            {field:'price1',title:'入库成本',width:130,n:'money',formatter:function (row,val,col) {
                    return row.type == 1 ? row.price : '';
                }},
            {field:'dj1',title:'单价成本',width:100,align:'right',formatter:function (row,val,col) {
                    return row.type == 1 ? app.div(row.price,row.number) : '';
                }},
            {field:'number2',title:'出库数量',width:80,n:'number',formatter:function (row,val,col) {
                    return row.type == 0 ? row.number : '';
                }},
            {field:'price2',title:'出库成本',width:130,n:'money',formatter:function (row,val,col) {
                    return row.type == 0 ? row.outPrice : '';
                }},
            {field:'dj2',title:'单价成本',width:100,align:'right',formatter:function (row,val,col) {
                    return row.type == 0 ? app.div(row.outPrice,row.number) : '';
                }},
            {field:'number3',title:'数量',width:130},
            {field:'price3',title:'成本',width:130},
            {field:'dj3',title:'单价',width:130}
        ];

        $('#table').reportgrid({
            //width:2000,
            fixed:true,
            url:app.BASE_API_URL+'report/storeDetail',
            queryParams:{companyId:app.getCompanyId()},
            columns:columns
        });

        $('#stoneId').combobox({
            url:'store/select',
            valueField:'id',textField:'name',
            name:'storeId'
        });

        $('#companyId').search({
            name:'companyId',
            click:function(){
                app.window(layer,{
                    btn:[],
                    area: ['600px', '450px'],
                    content: '../../common/company_tree.html?index=-1&searchId=companyId',
                    end:function () {

                        //setStoreData($('#companyId input[name="companyId"]').val());
                    }
                });
            }
        });

        var company = {companyId:app.getCompanyId(),companyId_text:app.getCompanyName()};
        app.resetForm(company);

        $('#productTypeId').search({
            name:'productTypeLogicalCode',
            click:function(){
                var index = parent.layer.getFrameIndex(window.name);
                app.window(parent.layer,{
                    title:'商品分类选择',
                    btn:[],
                    area: ['500px', '500px'],
                    content: './html/common/productype_tree.html?index='+index+'&queryId=productTypeId&idField=logicalCode'
                });
            }
        });

        $('#productId').search({
            id:"productId",
            name:'productId',
            click:function(){
                // this click before blur
                var index = layer.getFrameIndex(window.name);
                app.window(layer,{
                    title:'商品选择',
                    btn:[],
                    area: app.productArea,
                    content: '../../common/product_list_query.html?index='+index+'&searchId=productId'
                });
            }
        });
    }


</script>
</body>
</html>